import { renderToString } from "vue/server-renderer";
import express from "express";
import fs from "fs";
import { createApp } from "./app.js";

// 创建服务器实例
const server = express();

// 定义一个配置对象，配置页面的元数据信息
const desc = {
  title: "SSR demo",
  meta: '<meta name="description" content="这是一个SSR最简单的demo">',
};

server.get("/", async (req, res) => {
  try {
    // 根据vue实例渲染出来的字符串内容
    const app = createApp();
    const content = await renderToString(app);
    const template = fs.readFileSync("./index.html", "utf-8");
    const html = template
      .replace("<!--title-->", desc.title)
      .replace("<!--meta-->", desc.meta)
      .replace("<!--vue-ssr-outlet-->", content);
    res.send(html);
    // 读取模板文件
  } catch (err) {
    console.log(err);
    res.status(500).send("服务器内部错误");
  }
});

// 使用中间件
// 将当前目录作为静态资源服务器目录
server.use(express.static("."));

server.listen("3000", () => {
  console.log("服务器已启动，监听3000端口......");
});
